<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script src="js/jquery-1.10.1.min.js"></script>
		<script src="js/queryloader2.min.js"></script>
		
		<script>
			var SHAKE_THRESHOLD = 3000;  
	        var last_update = 0;  
	        var x = y = z = last_x = last_y = last_z = 0;  
	        function init() {  
	            if (window.DeviceMotionEvent) {  
	                window.addEventListener('devicemotion', deviceMotionHandler, false);  
	            } else {  
	                alert('not support mobile event');  
	            }  
	        }  
	        function deviceMotionHandler(eventData) {  
	            var acceleration = eventData.accelerationIncludingGravity;  
	            var curTime = new Date().getTime();  
	            if ((curTime - last_update) > 100) {  
	                var diffTime = curTime - last_update;  
	                last_update = curTime;  
	                x = acceleration.x;  
	                y = acceleration.y;  
	                z = acceleration.z;  
	                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;  
	  
	                if (speed > SHAKE_THRESHOLD) {  
	                     if(typeof window.shake=="function"){
	                     	shake();
	                     }
	                }  
	                last_x = x;  
	                last_y = y;  
	                last_z = z;  
	            }  
	        }  
	        function shake(){
	        	if($(".success-cover").css("display")!="none") return;
	        	mylight.run();
	        }
				function runLigts(settings) {
					settings = settings || {};
					this.selector = settings.selector || null;
					this.type = settings.type || "order"; //order依次，flash随机闪
					this.orderRang = settings.orderRang || 3; //依次闪亮重复次数
					this.randomCount = settings.randomCount || 6; //随机闪亮次数
					this.lightCls = settings.lightCls || "";
					this.onComplete=settings.onComplete||function(){};
					this.speed=settings.speed||200;//默认200ms闪亮一下
					this.runing=false;
				}
				runLigts.prototype.run = function() {
					if(this.runing) return;
					this.runing=true;
					var type = this.type;
					$(this.selector+"."+this.lightCls).removeClass(this.lightCls);
					this[type]();
					
				};
				runLigts.prototype.random = function(Min, Max) {
					var Range = Max - Min;
					var Rand = Math.random();
					var num = Min + Math.round(Rand * Range);
					return num;
				};
				runLigts.prototype.flash=function(){
					var $dom = $(this.selector);
					var random=this.random(0,$dom.length-1);
					var times=0;
					var index=0;
					var _flash=0;
					var that=this;
					function getRandom(){
						var r=that.random(0,$dom.length-1);
						if(r==_flash) {
							r=getRandom();
						}
						return r;
					}
					_flash=getRandom();
	                function flash(){
	                	setTimeout(function(){
	                		
	                		$dom.eq(index).removeClass(that.lightCls);
	                		index=_flash;
	                		$dom.eq(index).addClass(that.lightCls);
	                		_flash=getRandom();
	                		times++;
	                		if(times<that.randomCount){
	                			flash();
	                		}
	                		else{
	                			
	                			$dom.eq(index).removeClass(that.lightCls);
	                			$dom.eq(random).addClass(that.lightCls);
	                			that.onComplete(random);
	                			that.runing=false;
	                		}
	                	},that.speed);
	                }
	                flash();
				};
				runLigts.prototype.order = function() {
					var $dom = $(this.selector);
					var random=this.random(0,$dom.length-1);
					var index=0;
					var _rang=0;
					var that=this;
					function rang(){
						setTimeout(
							function(){
								var last=index-1;
								if(last<0) last=0;
								$dom.eq(last).removeClass(that.lightCls);
								$dom.eq(index).addClass(that.lightCls);
								index++;
								if(index>$dom.length) {
									index=0;
									_rang++;
								}
								if(_rang<that.orderRang){
									rang();
								}
								else{
									$dom.eq(index).removeClass(that.lightCls);
									$dom.eq(random).addClass(that.lightCls);
									that.onComplete(random);
									that.runing=false;
								}
							},that.speed
						);
					};
					rang();
				};
				var mylight=new runLigts({
						selector:".medal",
						lightCls:"zs",
						type:"flash",
						randomCount:20,
						onComplete:function(){
							setTimeout(function(){
								$('.success-cover').show();
							},2000);
						}
					});
				$(function(){
					init();
					
				});
		</script>
		
		<style>
			body,
			html {
				height: 100%;
			}
		</style>

	</head>

	<body>
		<div class="hb-container" id="preload">
			<div class="bg"></div>
			<div id="click" class="word">
				点击
				<br />
				参与游戏吧				
			</div>
			<img class="hb-bg01" src="img/hb-bg01.png" alt="hb-bg01" />
		</div>
		<!--
        	作者：245848724@qq.com
        	时间：2015-10-22
        	描述：hb-container end
        -->

		<div class="share" style="display: none;" onclick="$('.y-cover').show();"></div>
		
		<div class="y-cover" style="display: none;">
			<div class="y-container">
				<div class="bg"></div>
				<img src="img/y-bg01.png" alt="y-bg01" />
				<div class="medals">
					<a class="medal zs">
						<span></span>
						<label>初级<br />魔法勋章</label>
					</a>
					<a class="medal">
						<span></span>
						<label>高阶<br />魔法套装</label>
					</a>
					<a class="medal">
						<span></span>
						<label>魔法圣物</label>
					</a>
					<br />
					<a class="medal">
						<span></span>
						<label>魅灵套装</label>
					</a>
					<a class="medal">
						<span></span>
						<label>欢乐卷轴</label>
					</a>
					<a class="medal">
						<span></span>
						<label>欢乐魔力<br />卷轴</label>
					</a>
					<br />
					<a class="medal">
						<span></span>
						<label>谢谢参与</label>
					</a>									
				</div>
			</div>
		</div>
	
		<div class="success-cover" style="display:none;" onclick="$('.bad-cover').show();">
			<div class="success-container">
				<div class="bg"></div>
				<div class="rul">
					<em>【活动规则】</em>
					<p>
						领奖时间：2015年10月29日—11月1日 14:00—17:00
						<br /> 咨询电话：028—61898866
						<br /> 领奖地点：华侨城•东岸会所
					</p>
					<ul>
						<li>1、根据工作人员要求，扫描二维码关注华侨城•原岸微信号</li>
						<li>2、在微信后台查找【万圣节】按钮，点击参与游戏</li>
						<li>3、获取奖品请在规定时间内至华侨城•东岸领取</li>
						<li>4、中奖者凭借本人身份证、手机号、获奖截图领奖，每人限领一次</li>
						<li>5、因不可控因素，主办方有权提前终止本次活动</li>
					</ul>
				</div>
				<p class="content">					
					 门开了，哇！开心鬼降临！
					<br />
					<em>恭喜你获得初级魔法勋章<span>(魔法胸章)</span></em>
				</p>
				<img class="suc-bg01" src="img/suc-bg01.png" alt="suc-bg01" />
			</div>
		</div>

		<div class="bad-cover" style="display:none;">
			<div class="bad-container">
				<div class="bg"></div>
				<div class="rul">
					<em>【活动规则】</em>
					<p>
						领奖时间：2015年10月29日—11月1日 14:00—17:00
						<br /> 咨询电话：028—61898866
						<br /> 领奖地点：华侨城•东岸会所
					</p>
					<ul>
						<li>1、根据工作人员要求，扫描二维码关注华侨城•原岸微信号</li>
						<li>2、在微信后台查找【万圣节】按钮，点击参与游戏</li>
						<li>3、获取奖品请在规定时间内至华侨城•东岸领取</li>
						<li>4、中奖者凭借本人身份证、手机号、获奖截图领奖，每人限领一次</li>
						<li>5、因不可控因素，主办方有权提前终止本次活动</li>
					</ul>
				</div>
				<p class="content">
					<em>很遗憾，还有机会哦</em>
					<br />
					<span>关注华侨城原岸微信号，更多精彩活动等你参加</span>
				</p>
				<img class="suc-bg01" src="img/suc-bg01.png" alt="suc-bg01" />
			</div>
		</div>

		<div class="audioControl play"></div>
		<div style="display: none;">
			<audio id="media" style="display:none;" src="img/media.mp3" loop controls></audio>
		</div>

		<script>
			$("body").queryLoader2({
				barColor: "#efefef",
				backgroundColor: "#111",
				percentage: true,
				barHeight: 1,
				minimumTime: 200,
				fadeOutTime: 1000,
				onComplete: function() {
					$("#preload").show();					
					
					$("#click").on("click", function() {
						$(".share").show();
					});
					
				}
			});
			
			
			$(function(){
				var audio = document.getElementById("media");
				audio.play();
					$(".audioControl").bind("click", function() {
						if ($(this).hasClass("play")) {
							$(this).removeClass("play");
							$(this).addClass("stop");
							audio.pause();
						} else {
							$(this).removeClass("stop");
							$(this).addClass("play");
							audio.play();
						}
					});
			});
		</script>
	</body>

</html>